<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录</title>
        <link rel="shortcut icon" href="https://yuyoublog.cn/img/favicon.ico"/>
        <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="../js/login.js"></script>
    </head>
    <style>
            * {
                margin: 0;
                padding: 0;
            }
            html {
                height: 100%;
            }
            body {
                height: 100%;
            }
            .container {
                height: 100%;
                background-image:url(../img/bg.jpg);

            }
            .login-wrapper {
                background-color: #fff;
                width: 358px;
                height: 588px;
                border-radius: 15px;
                padding: 0 50px;
                position: relative;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .header {
                font-size: 38px;
                font-weight: bold;
                text-align: center;
                line-height: 200px;
                color: #2e70a5;
            }
            .input-item {
                display: block;
                width: 100%;
                margin-bottom: 20px;
                border: 0;
                padding: 10px;
                border-bottom: 1px solid rgb(128, 125, 125);
                font-size: 15px;
                outline: none;
            }
            .input-item:placeholder {
                text-transform: uppercase;
            }
            .btn {
                text-align: center;
                padding: 10px;
                width: 100%;
                margin-top: 40px;
                background-image: linear-gradient(to bottom, #4584b9, #2e70a5);
                color: #fff;
				
            }
			.github{
				text-align: center;
				padding: 10px;
				width: 100%;
				margin-top: 20px;
				background: linear-gradient(to bottom, #4c4c4c, #323232);
				color: #fff;
			}
			.githubicon {
				 display: inline-block;
				 width: 40px;
				 height:20px;
				 background: url("../img/github.png") no-repeat;
				 background-position: center center;
				 background-size: 20px 20px;
			}
            .msg {
                text-align: center;
                line-height: 88px;
            }
            a {
                text-decoration-line: none;
                color: #abc1ee;
            }
        </style>
    <body>
       <div class="container">
               <div class="login-wrapper">
                   <div class="header">Login myblog</div>
                   <div class="form-wrapper">
                       <form>
                       <input type="text" name="username" placeholder="username" id="usrn" class="input-item">
                       <input type="password" name="password" placeholder="password" id="mima" class="input-item">
                       </form>
                       <div class="btn">登录</div>
					   <div class="github"><i class="githubicon"></i>Continue with Github</div>
                   </div>
               </div>
           </div>
           
    </body>
</html>